<template>
  <div class="all_page" v-if="able">
    <div class="inpaper">
      <!-- <div class="Jname">
        <span>{{ info.questionnaire_title }}</span>
      </div> -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <div class="Jname">
              <span>{{ info.questionnaire_title }}</span>
            </div>
            <el-row :gutter="12">
              <el-col :span="6">
                <el-card shadow="never" class="title"> 姓名 </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" class="title"> 学号 </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" class="title">> 得分 </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never" class="title">> 答题时长 </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="6">
                <el-card shadow="never"> 姓名：{{ info.number }} </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never"> 学号：{{ info.name }} </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never"> 得分：{{ info.total_score }} </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="never"> 用时：{{ info.use_time }} </el-card>
              </el-col>
            </el-row>
          </div>
        </template>
        <div
          v-for="(item, index) in info.questions"
          :key="index"
          class="text item"
        >
          <div v-if="item.right === '回答错误'">
            <div class="question">
              <div class="text" :style="'margin-top:3%'">
                {{ index + 1 + "." + item.question_title }}
              </div>
              <div class="score" :style="'margin-top:3%'">
                分值{{ item.score }}分
              </div>
            </div>
            <div v-if="item.question_type === 'single'">
              <div v-for="(item1, index) in item.options" :key="index">
                <el-radio
                  disabled
                  v-model="radio"
                  label="1"
                  v-if="item.answer.indexOf(item1) !== -1"
                  >{{ item1 }}</el-radio
                >
                <el-radio
                  disabled
                  v-model="radio"
                  label="2"
                  v-if="item.answer.indexOf(item1) === -1"
                  >{{ item1 }}</el-radio
                >
              </div>
            </div>
            <div v-if="item.question_type === 'multi'">
              <div v-for="(item1, index) in item.options" :key="index">
                <el-checkbox
                  v-model="checked2"
                  disabled
                  v-if="item.answer.indexOf(item1) !== -1"
                  >{{ item1 }}</el-checkbox
                >
                <el-checkbox v-model="checked1" disabled v-else>{{
                  item1
                }}</el-checkbox>
              </div>
            </div>
            <div v-if="item.question_type === 'fill'">
              <span :style="'font-size: 18px; color:#919090'">{{
                item.answer[0]
              }}</span>
            </div>
            <div class="result">
              <div
                :style="
                  'display: flex; flex-flow: row nowrap;align-items: center;width:50%'
                "
              >
                <el-result icon="error"></el-result>
                <span :style="'font-size: 16px; color:red'">回答错误</span>
              </div>
              <span :style="'font-size: 16px; color:red;margin-right:5%'"
                >+{{ item.grade }}分</span
              >
            </div>
            <div
              :style="
                'height:auto;background: #f2f2f2;border-radius: 20px;margin-top:1%'
              "
            >
              <span :style="'font-size: 16px; color:green;margin-left:2%'"
                >正确答案：</span
              >
              <br />
              <span
                :style="'font-size: 16px;margin-left:2%;margin-bottom:2%'"
                v-for="(opt, index) in item.correct"
                :key="index"
                >{{ opt }}</span
              >
            </div>
          </div>
          <div v-if="item.right === '回答正确'">
            <div class="question">
              <div class="text" :style="'margin-top:3%'">
                {{ index + 1 + "." + item.question_title }}
              </div>
              <div class="score" :style="'margin-top:3%'">
                分值{{ item.score }}分
              </div>
            </div>
            <div v-if="item.question_type === 'single'">
              <div v-for="(item1, index) in item.options" :key="index">
                <el-radio
                  disabled
                  v-model="radio"
                  label="1"
                  v-if="item.answer.indexOf(item1) !== -1"
                  >{{ item1 }}</el-radio
                >
                <el-radio
                  disabled
                  v-model="radio"
                  label="2"
                  v-if="item.answer.indexOf(item1) === -1"
                  >{{ item1 }}</el-radio
                >
              </div>
            </div>
            <div v-if="item.question_type === 'multi'">
              <div v-for="(item1, index) in item.options" :key="index">
                <el-checkbox
                  v-model="checked2"
                  disabled
                  v-if="item.answer.indexOf(item1) !== -1"
                  >{{ item1 }}</el-checkbox
                >
                <el-checkbox v-model="checked1" disabled v-else>{{
                  item1
                }}</el-checkbox>
              </div>
            </div>
            <div v-if="item.question_type === 'fill'">
              <span :style="'font-size: 18px; color:#919090'">{{
                item.answer[0]
              }}</span>
            </div>
            <div class="result">
              <div
                :style="
                  'display: flex; flex-flow: row nowrap;align-items: center;width:50%'
                "
              >
                <el-result icon="success"></el-result>
                <span :style="'font-size: 16px; color:green'">回答正确</span>
              </div>
              <span :style="'font-size: 16px; color:green;margin-right:5%'"
                >+{{ item.grade }}分</span
              >
            </div>
          </div>
          <div v-if="item.right === '部分正确'">
            <div class="question">
              <div class="text" :style="'margin-top:3%'">
                {{ index + 1 + "." + item.question_title }}
              </div>
              <div class="score" :style="'margin-top:3%'">
                分值{{ item.score }}分
              </div>
            </div>
            <div v-if="item.question_type === 'multi'">
              <div v-for="(item1, index) in item.options" :key="index">
                <el-checkbox
                  v-model="checked2"
                  disabled
                  v-if="item.answer.indexOf(item1) !== -1"
                  >{{ item1 }}</el-checkbox
                >
                <el-checkbox v-model="checked1" disabled v-else>{{
                  item1
                }}</el-checkbox>
              </div>
            </div>
            <div class="result">
              <div
                :style="
                  'display: flex; flex-flow: row nowrap;align-items: center;width:50%'
                "
              >
                <el-result icon="warning"></el-result>
                <span :style="'font-size: 16px; color:rgb(161, 121, 32)'"
                  >部分正确</span
                >
              </div>
              <span
                :style="
                  'font-size: 16px; color:rgb(161, 121, 32);margin-right:5%'
                "
                >+{{ item.grade }}分</span
              >
            </div>
            <div
              :style="
                'height:auto;background: #f2f2f2;border-radius: 20px;margin-top:1%'
              "
            >
              <span :style="'font-size: 16px; color:green;margin-left:2%'"
                >正确答案：</span
              >
              <br />
              <span
                :style="'font-size: 16px;margin-left:2%;margin-bottom:2%'"
                v-for="(opt, index) in item.correct"
                :key="index"
                >{{ opt }}</span
              >
            </div>
          </div>
          <div v-if="item.right === '人工评分'">
            <div class="question">
              <div class="text" :style="'margin-top:3%'">
                {{ index + 1 + "." + item.question_title }}
              </div>
              <div class="score" :style="'margin-top:3%'">
                分值{{ item.score }}分
              </div>
            </div>
            <div v-if="item.question_type === 'fill'">
              <span :style="'font-size: 18px; color:#919090'">{{
                item.answer[0]
              }}</span>
            </div>
            <div class="result">
              <div
                :style="
                  'display: flex; flex-flow: row nowrap;align-items: center;width:50%'
                "
              >
                <!-- <el-result icon="success"></el-result> -->
                <span
                  :style="
                    'font-size: 16px;margin-top:3%;margin-bottom:3%;margin-left:2%;color:bule'
                  "
                  >等待老师判题</span
                >
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {
    qid: Number,
    sid: Number,
    ip: String,
  },
  async created() {
    await axios
      .post("decode/", {
        questionnaire_id: this.qid,
      })
      .then((response) => {
        if (response.data.code == -1) {
          this.$router.push({
            path: "/failure",
            query: {
              msg: "该问卷不存在或您没有权限访问",
            },
          });
        }
        this.questionnaire_id = response.data.id;
      });
    await axios
      .post("judge_page/", { qid: this.questionnaire_id, sid: this.sid })
      // .get("http://api.tianapi.com/txapi/ncov/index", {"key":'dfea6e45e4b42824644108bfaabf1e6a',"domain":'baidu.com'})
      .then((res) => {
        if (res.data.code === 0) {
          console.log(res.data);
          this.info = res.data.info;
          var order = JSON.parse(
            localStorage.getItem("order" + this.ip + this.questionnaire_id)
          );
          if (order) {
            order = order.slice(2);
            var tmp = this.info.questions;
            this.info.questions.sort(function(a, b) {
              var index1 = order.indexOf(tmp.indexOf(a));
              var index2 = order.indexOf(tmp.indexOf(b));
              return index1 < index2 ? -1 : 1;
            });
          }
          this.able = true;
        }
      });
  },
  data() {
    return {
      able: false,
      radio: "1",
      checked1: false,
      checked2: true,
      info: null,
      questionnaire_id: null,
      // info: {
      //   questionnaire_title: "小测试",
      //   submit_time: "2021-8-26",
      //   use_time: "30seconds",
      //   name: "bala",
      //   number: "123",
      //   questions: [
      //     {
      //       question_title: "问题一",
      //       question_type: "single",
      //       options: ["yes", "no"],
      //       row: 5,
      //       must: true,
      //       remark: "问题备注",
      //       score: 5,
      //       correct: ["yes"],
      //       answer: ["yes"],
      //       grade: 5,
      //       right: "回答正确",
      //     },
      //     {
      //       question_title: "问题二",
      //       question_type: "multi",
      //       row: 5,
      //       options: ["yes", "1", "2"],
      //       must: true,
      //       remark: "问题备注",
      //       score: 5,
      //       correct: ["yes", "1", "2"],
      //       answer: ["2", "1", "yes"],
      //       grade: 5,
      //       right: "回答正确",
      //     },
      //     {
      //       question_title: "问题三",
      //       question_type: "fill",
      //       row: 5,
      //       must: true,
      //       remark: "问题备注",
      //       score: 5,
      //       correct: ["yes"],
      //       answer: "no",
      //       grade: 0,
      //       right: 4,
      //     },
      //   ],
      // },
    };
  },
};
</script>
<style scoped>
.Jname {
  display: flex;
  justify-content: center;
  font-family: "微软雅黑";
  font-size: 50px;
  font-weight: bold;
  letter-spacing: 10px;
}
.paper {
  background: rgb(248, 247, 246);
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 5%;
  margin-bottom: 5%;
}
.inpaper {
  margin-top: 10%;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 10%;
}
/* .all_page{
  background-image: url(@/assets/judge.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
} */
/* .all_page {
  background: #e3f3f8;
  height: 100%;
  overflow: auto;
} */

.el-card {
  opacity: 0.9;
}

.all_page {
  background-image: url(../../../assets/img2.jpg);
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-y:scroll;
  background-size: 100% 100%;
}

/* .el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
} */

.title {
  /* min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all 0.5s; */
  height: 15px;
  font-size: 10px;
  text-align: center;
}
.question {
  display: flex;
  flex-flow: row nowrap;
  /* justify-content: space-between; */
  align-items: center;
}
.text {
  font-size: 20px;
  font-family: "微软雅黑";
}
.score {
  font-size: 15px;
  font-family: "微软雅黑";
  width: auto;
  border-radius: 20px;
  color: #919090;
  background: #f2f2f2;
  margin-left: 5%;
}
.el-result {
  width: 10%;
  height: 10%;
  margin-top: 1%;
  --el-result-icon-font-size: 25px;
  --el-result-padding: 0px, 0px;
}
.result {
  height: auto;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background: #f2f2f2;
  border-radius: 20px;
  /* justify-content: space-between; */
  align-items: center;
}
</style>
